/**
 * @name ChatItem
 * @author darcrand
 * @desc 单个聊天记录
 */

import React, { Component } from 'react'
import { dateFormate } from '@/utils'
import './styles.scss'

class ChatItem extends Component {
    static defaultProps = {
        id: '',
        date: '',
        message: '',
        shouldShowDate: false,
        userInfo: {
            id: '',
            name: '',
            avatar: ''
        },
        currUserId: ''
    }

    render() {
        const { date, message, shouldShowDate, userInfo, currUserId } = this.props
        const suffix = userInfo.id === currUserId ? '-self' : '-other'

        return (
            <li classes="container">
                {shouldShowDate && <p classes="date">{dateFormate(date, 'hh:mm:ss')}</p>}
                <div classes={`content${suffix}`}>
                    <div
                        classes="avatar"
                        style={{ backgroundImage: `url("${require('@/assets/avatars/' + userInfo.avatar + '.jpg')}")` }}
                    />
                    <div classes={`info${suffix}`}>
                        <p classes={`name${suffix}`}>{userInfo.name}</p>
                        <p classes={`message${suffix}`}>{message}</p>
                    </div>
                </div>
            </li>
        )
    }
}

export default ChatItem
